<template>
  <div class="county-select">
    <el-select
      v-model="form[needName ? `${proField}Code` : proField]"
      clearable
      placeholder="省"
      @change="changeProvince"
      :disabled="disabled"
    >
      <el-option
        v-for="item in provinces"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select
      v-model="form[needName ? `${cityField}Code` : cityField]"
      clearable
      placeholder="市"
      style="margin:0px 10px"
      @change="changeCity"
      :disabled="disabled"
    >
      <el-option
        v-for="item in citys"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select
      v-model="form[needName ? `${countyField}Code` : countyField]"
      clearable
      placeholder="区"
      @change="changeCounty"
      :disabled="disabled"
    >
      <el-option
        v-for="item in countys"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script>
import pcaa from '@/assets/js/pcaa'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    form: {
    },
    proField: {
      type: String,
      default: 'pro',
    },
    cityField: {
      type: String,
      default: 'city',
    },
    countyField: {
      type: String,
      default: 'county',
    },
    needName: {
      type: Boolean,
      default: false,
    },
    onlyCq: {
      type: Boolean,
      default: false,
    },
  },
  created(){
    let obj = pcaa['86']
    let arr = Object.keys(pcaa['86'])
    if (this.onlyCq) {
      this.provinces = [
        {
          label: obj['500000'],
          value: '500000'
        }
      ]
    } else {
      this.provinces = arr.map(item => {
        return {
          label: obj[item],
          value: item
        }
      })
    }
  },
  data() {
    return {
      pcaaData: pcaa,
      // 区域数据
      provinces: [],
      citys: [],
      countys: [],
    };
  },
  computed: {
    province() {
      return this.needName ? this.form[`${this.proField}Code`] : this.form[this.proField]
    },
    city() {
      return this.needName ? this.form[`${this.cityField}Code`] : this.form[this.cityField]
    },
    county() {
      return this.needName ? this.form[`${this.countyField}Code`] : this.form[this.countyField]
    }
  },
  watch :{
    province: {
      handler(val,oldVal) {
        if(val){
          let obj = this.pcaaData[val]
          let arr = Object.keys(this.pcaaData[val])
          this.citys = arr.map(item => {
            return {
              label: obj[item],
              value: item
            }
          })
          if(oldVal){
            if (this.needName) {
              this.form[`${this.cityField}Code`] = null
              this.form[`${this.countyField}Code`] = null
            }
            if (val !== oldVal) {
              this.form[this.cityField] = null
              this.form[this.countyField] = null
            }
          }
        } else {
          if (this.needName) {
            this.form[`${this.cityField}Code`] = null
            this.form[`${this.countyField}Code`] = null
          }
          this.form[this.cityField] = null;
          this.form[this.countyField] = null;
          this.citys = []
          this.countys = []
        }
      },
      deep:true,
      immediate:true
    },
    city: {
      handler(val,oldVal) {
        if(val){
          let obj = this.pcaaData[val]
          let arr = Object.keys(this.pcaaData[val])
          this.countys = arr.map(item => {
            return {
              label: obj[item],
              value: item
            }
          })
          if(oldVal){
            if (this.needName) {
              this.form[`${this.countyField}Code`] = null
            }
            if (val !== oldVal) {
              this.form[this.countyField] = null
            }
          }
        } else {
          if (this.needName) {
            this.form[`${this.countyField}Code`] = null
          }
          this.form[this.countyField] = null;
          this.form.unitAddrCounty = null
          this.countys = []
        }
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    changeCounty(val) {
      if (this.needName) {
        if (val) {
          this.countys.find(item => {
            if(item.value === val){
              this.form[this.countyField] = item.label
            }
          })
        } else {
          this.form[this.countyField] = null
        }
      }
    },
    changeCity(val) {
      if (this.needName) {
        if (val) {
          this.citys.find(item => {
            if(item.value === val){
              this.form[this.cityField] = item.label
            }
          })
        } else {
          this.form[this.cityField] = null
        }
      }
    },
    changeProvince(val) {
      if (this.needName) {
        if (val) {
          this.provinces.find(item => {
            if(item.value === val){
              this.form[this.proField] = item.label
            }
          })
        } else {
          this.form[this.proField] = null
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.county-select {
  display: flex;
  .el-select {
    flex: 1;
  }
}
</style>
